<template>
    <div style="height:820px;width: 100%">
<!--        主界面-->
        <el-row style="height: 100%">
<!--            左侧部分-->
            <el-col :span="18" class="indexLeftArea">
                <el-card style="width: 100%;height: 810px;">
<!--                    最新-->
                    <el-row style="width: 100%;height: 400px">
                        <el-col :span="24" class="indexLeftArea-part-top">
                            <NewBlogList></NewBlogList>
                        </el-col>
                    </el-row>
<!--                    公告信息-->
                    <el-row style="width: 100%;flex:1;">
                        <el-col :span="24" class="indexLeftArea-part-down">
                           <InformList></InformList>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
<!--            右侧部分-->
            <el-col :span="6" class="indexRightArea">
<!--                排行榜-->
                <el-row style="width: 100%;padding-left: 5px">
                    <el-col :span="24" class="indexRightArea_Part_top">
                        <RankList></RankList>
                    </el-col>
                </el-row>
<!--                今日推荐-->
                <el-row style="width: 100%;padding: 5px 0 0 5px;flex: 1">
                    <el-col :span="24" class="indexRightArea_Part_down">
                        <TodayRecommendBlog></TodayRecommendBlog>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import RankList from "@/components/FrontSystem/function/blog/RankList";
    import TodayRecommendBlog from "@/components/FrontSystem/function/blog/TodayRecommendBlog";
    import NewBlogList from "@/components/FrontSystem/function/blog/NewBlogList";
    import InformList from "@/components/FrontSystem/function/blog/InformList";


    export default {
        name: "FrontIndex",
        components: {InformList, NewBlogList, TodayRecommendBlog, RankList},
        methods:{

        }

    }
</script>

<style scoped>

    .indexLeftArea{
        /*background: rgba(95, 184, 187, 0.6);*/
        height: 820px;
        padding: 5px;
    }

    .indexLeftArea-part-top{
        /*background: rgba(141, 95, 187, 0.6);*/
        height: 100%;
        padding: 5px;
    }

    .indexLeftArea-part-down{
        /*background: rgba(159, 187, 95, 0.6);*/
        height: 100%;
        padding: 5px;
    }

    .indexRightArea{
        /*background: rgba(112, 83, 168, 0.56);*/
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .indexRightArea_Part_top{
        /*background: rgba(241, 241, 236, 0.56);*/
        height: 440px;
    }
    .indexRightArea_Part_down{
        /*background: rgba(241, 241, 236, 0.56);*/
        height: calc(100% - 20px);
    }

    .font-style{
        font-size: 18px;
        color: #434446;
    }

    /deep/.el-card__body{
        padding: 20px;
        display: flex;
        flex-direction: column;
    }

</style>
